<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript DOM</title>
</head>
<body>
    <div id ="box1">这是一个ID选择器</div>

    <div class ="box2">这是一个类选择器</div>

    <div>普通的DIV标签</div>

    <button>点击按钮</button>
    <!-- <a href="#" >跳转链接</a> -->

    <script>
        /*
        Dom操作为：
        1、编程接口
        2、进行 对HTML/XML 文档进行文档书
        */
       var element_id = document.getElementById('box1');
       console.log(element_id)

       var element_class = document.getElementsByClassName('box2')[0];
       console.log(element_class);

       var element_tag = document.getElementsByTagName('div')[2];
       console.log(element_tag);

       element_id.innerHTML = '修改ID选择器文本内容';
       element_class.innerText = '修改后的类选择器文本'
       element_tag.style.color = 'red';
       element_tag.style.fontSize = '20px';

       //DOM 属性绑定事件
       var button_element = document.getElementsByTagName('button')[0];
       console.log(button_element);

    //    第一张点击事件方法   
    //    button_element.onclick = function () {
    //    alert("Good!");}
    
        //Dom事件第二种方法
        button_element.addEventListener('click',function () {
            alert("Good!");
        })
        //Dom事件第三种方法

    </script>


</body>
</html>